<!DOCTYPE html>
<html lang="zh">
	<head>
		<title>Vue3实例</title>
		<!-- 导入 Vue 3 -->
		<script src="./assets/libaray/vue3/vue3.js"></script>
		<!-- 导入组件库 -->
		<script src="//cdn.jsdelivr.net/npm/element-plus"></script>
		<!-- 导入样式 -->
		<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css" />
		<!-- 引入工具库 -->
		<script src="//cdn.jsdelivr.net/npm/@jiess/utils"></script>
		<script src="//cdn.jsdelivr.net/npm/@jiess/utils/lib/JiessMidder.js"></script>
		<script src="//cdn.jsdelivr.net/npm/@jiess/http"></script>
		<script src="//cdn.jsdelivr.net/npm/@jiess/http/lib/JiessLoading.js"></script>
		<!-- 导入plus核心库 -->
		<script src="//cdn.jsdelivr.net/npm/@jiess/plus"></script>
		<!-- 导入环境适配代码 -->
		<script src="//cdn.jsdelivr.net/npm/@jiess/plus/lib/envVue3.js"></script>
		<!-- 导入基础样式 -->
		<link rel="stylesheet" href="../jiess-base/vue3element/css/base.css">
	</head>
	<body>
		<div id="root">
			<jiess :setup="setup" />
		</div>
		<script>
			// 这里为了方便示例，定义全局变量
			var env = 'vue3-element';
		</script>
		<script type="module">
			import {
				$Area,
				$Between,
				$modules,
				$tanInstance,
				$dialogInstance,
				// --------------------
				$SuperTable,
				$ActionButton,
				$ActionButtons,
				$JiessDialog,
				$TableTools,
				$TableFilter,
				$ExpandFilter,
				$JiessTable,
				// --------------------
				$Input,
				$Select,
				$InputNumber,
				$Cascader,
				$CascaderPanel,
				$Autocomplete
			} from '../jiess-base/vue3element/cdn/index.js';
			import { _SuperTable, _ruleConfig } from '../jiess-base/config.js';
			// 获取列表基础配置，并挂载到window上
			window.SuperTableCnf = _SuperTable;
			window.ruleConfig = _ruleConfig;
			window.$modules = $modules;
			window.$Input = $Input;
			window.$Select = $Select;
			window.$InputNumber = $InputNumber;
			window.$Cascader = $Cascader;
			window.$CascaderPanel = $CascaderPanel;
			window.$Autocomplete = $Autocomplete;
			// ==============================================================
			const modulePath = location.search.replace('?path=', '');
			const { $entry, $component } = JiessCore;
			const jiess = $entry(JiessEnv, Vue, {
				area: $Area,
				$tan: $tanInstance,
				dialog: $dialogInstance,
				// 注入全局的消息提示
				$msg: (message, type = 'success') => ElementPlus.ElMessage({ message, type }),
			});
			$component('$Between', $Between);
			$component('$ActionButton', $ActionButton);
			$component('$ActionButtons', $ActionButtons);
			$component('jiess', jiess.JiessComponent);
			// 异步导setup配置后，再启用渲染
			import(`./${modulePath}/config/index.js`).then(dd => {
				Vue.createApp({
						created() {
							this.setup = function() {
								this.add(this.render({ is: $JiessDialog }));
								dd.default.call(this, {
									$SuperTable,
									$TableFilter,
									$TableTools,
									$ExpandFilter,
									$JiessTable,
									Button: ElementPlus.ElButton
								})
							}
						}
					})
					.component('jiess', jiess.JiessComponent)
					.mount('#root');
			});
		</script>
	</body>
</html>